<template>
  <div>
    <h1>用户列表</h1>
    <div>
        {{"用户名："+info.name}}<hr>
      详细信息：{{info}}<hr>
      地区：{{info.address.area}}
    </div>
  </div>
</template>

<script>
  import Main1 from '../views/Main';
  // Vue.use(Main)
    export default {
      name: "List",
      data() {
        return {
          info: {
            name: null,
            url: null,
            address: {
              province: null,
              area: null,
              Country: null
            }
          }
        };
      },
      beforeRouteEnter: (to, from, next) => {
        console.log("进入路由之前");
        next(vm => {
          vm.getData()//进入路由之前执行getData函数获取json数据
        });
      },
      beforeRouteLeave: (to, from, next) => {
        console.log("离开路由之前");
        next();
      },
      methods: {
        getData: function () {
          const  _this=this
          this.axios({
            method: 'get',
            url: "http://localhost:8080/static/data.json"
          }).then(response => (
            _this.info = response.data))
        },
        components: {
          Main1
        }
      }
    }
</script>

<style scoped>

</style>
